<template>
	<div class="">
		<div class="crumbs">
			<!-- <h2 class="">排名管理</h2> -->
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="笔试排名" name="one"></el-tab-pane>
				<el-tab-pane label="面试排名" name="two"></el-tab-pane>
			</el-tabs>
		</div>
		<div class="container ">
			<div class="handle-box margin-bottom20">
				<el-form :model="query" label-width="80px" class="ipt row-me">
					<el-form-item label="地区">
						<el-cascader :props="{value: 'id',label: 'name',checkStrictly: true}" v-model="query.city"
							:options="areaList" placeholder="请选择地区" @change="onAreaChange"></el-cascader>
					</el-form-item>
					<el-form-item label="认证状态">
						<el-select v-model="query.approve" placeholder="请选择">
							<el-option v-for="(item,index) in approveList" :key="index" :value="item.id" :label="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="认证日期" class="">
						<el-date-picker v-model="dateList" style="width: 380px;margin-right: 20px;" type="datetimerange"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
							@change="onChange">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="业务员">
						<el-select v-model="query.businessId" placeholder="请选择">
							<el-option v-for="(item,index) in salesmanList" :key="index" :value="item.id" :label="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="机构名称">
						<el-input v-model="query.organName" placeholder="请输入机构名称"></el-input>
					</el-form-item>
				</el-form>

				<el-button type="primary" @click="handleSearch">查询</el-button>
				<el-button @click="resetClick">重置</el-button>
				<el-button type="primary" class="handle-del" @click="addMerchant">+ 新增商家排名
				</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
				@selection-change="handleSelectionChange">
				<!-- <el-table-column type="selection" width="40" align="center"></el-table-column> -->
				<el-table-column type="index" width="55" align="center" label="序号"></el-table-column>
				<el-table-column prop="sort" label="排名" align="center" width="80"></el-table-column>
				<el-table-column prop="name" label="机构信息" align="center" width="200">
					<template slot-scope="scope">
						<div class="row-me center-all" v-if="scope.row.organMessage">
							<el-image class="width80 height80 margin-right10" :src="scope.row.organMessage.organImg"
								fit=" scale-down " :preview-src-list="[scope.row.organMessage.organImg]">
							</el-image>
							<div class="">{{scope.row.organMessage.organName}}</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="排名区域">
					<template slot-scope="{row}">
						<span>{{row.provinceName}}{{row.cityName}}{{row.regionName}}</span>
					</template>
				</el-table-column>
				<el-table-column prop=organMessage."addressComment" label="地址" align="center"
					show-overflow-tooltip></el-table-column>
				<el-table-column prop="sort" label="会员状态" align="center">
					<template slot-scope="scope">
						<div class="" v-if="scope.row.organMessage">
							<!-- 0未认证1认证机构2金牌机构3钻石机构4不显示 -->
							<div class="" v-if="!$.isEmpty(scope.row.organMessage.organWrit)">
								笔试：
								<span v-if="scope.row.organMessage.organWrit == 0">未认证</span>
								<span v-if="scope.row.organMessage.organWrit == 1">认证机构</span>
								<span v-if="scope.row.organMessage.organWrit == 2">金牌机构</span>
								<span v-if="scope.row.organMessage.organWrit == 3">钻石机构</span>
								<span v-if="scope.row.organMessage.organWrit == 4">不显示</span>
							</div>

							<div class="" v-if="!$.isEmpty(scope.row.organMessage.organInter)">
								面试：
								<span v-if="scope.row.organMessage.organInter == 0">未认证</span>
								<span v-if="scope.row.organMessage.organInter == 1">认证机构</span>
								<span v-if="scope.row.organMessage.organInter == 2">金牌机构</span>
								<span v-if="scope.row.organMessage.organInter == 3">钻石机构</span>
								<span v-if="scope.row.organMessage.organInter == 4">不显示</span>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="到期日期" align="center">
					<template slot-scope="scope">
						<span>{{scope.row.sortEnd||''}}</span>
					</template>
				</el-table-column>
				<el-table-column label="认证价格" align="center">
					<template slot-scope="scope">
						<div v-if="scope.row.organMessage&&scope.row.organMessage.writPrice">笔试：{{scope.row.organMessage.writPrice}}
						</div>
						<div v-if="scope.row.organMessage&&scope.row.organMessage.interPrice">
							面试：{{scope.row.organMessage.interPrice}}</div>
					</template>
				</el-table-column>
				<el-table-column label="业务员" align="center">
					<template slot-scope="scope">
						<span class=""
							v-if="!$.isEmpty(scope.row.organMessage)&&!$.isEmpty(scope.row.organMessage.adminUser)">{{scope.row.organMessage.adminUser.name}}/{{scope.row.organMessage.adminUser.mobile}}</span>
					</template>
				</el-table-column>

				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" @click="handleEdit(scope.$index, scope.row),(dialogTitle = '编辑')">编辑排名
						</el-button>
						<el-popconfirm title="确定删除？" @confirm="clickDel(scope.row.id)">
							<el-button type="text" slot="reference">删除排名</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageNumber"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>
		<!-- 新增商家排名 -->
		<el-dialog :title="title" :visible.sync="rankingShow" width="40%">

			<el-form :model="rankingForm" :rules="rules" ref="rankingForm" label-width="120px" class="demo-addClassesForm">
				<el-form-item label="地区">
					<el-cascader :props="props" class="width100Per" v-model="rankingForm.area" :options="areaList"
						placeholder="请选择地区" @change="areaChange"></el-cascader>
				</el-form-item>
				<el-form-item label="选择商家" prop="organId" v-if="title != '编辑排名'">
					<el-select v-model="rankingForm.organId" filterable placeholder="请选择" class="width100Per">
						<el-option v-for="(item,index) in shopsList" :key="index" :value="item.id" :label="item.organName">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="输入排名" required>
					<el-input placeholder="请输入" v-model="rankingForm.sort"
						@input="rankingForm.sort=$.checkInput(rankingForm.sort,0)"></el-input>
				</el-form-item>
				<el-form-item label="结束时间">
					<el-date-picker v-model="rankingForm.sortEnd" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="当前排名">
					<el-input v-model="rankingForm.currentSort" :disabled="true" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="rankingConfirm('rankingForm')">确定</el-button>
					<el-button @click="rankingShow = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		name: 'categoryTable',
		data() {
			return {
				query: {
					authType: 1,
					pageNumber: 1,
					pageSize: 10,
				},
				dialogTitle: '',
				tableData: [],
				multipleSelection: [],
				editVisible: false,
				pageTotal: 0,
				form: {},
				areaList: [], //地区
				// 认证状态1开启0关闭
				approveList: [{
						id: 1,
						name: '开启'
					},
					{
						id: 2,
						name: '关闭'
					},
				],
				salesmanList: [],
				rankingShow: false,
				rankingForm: {},
				rules: {
					organId: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					sort: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
				},

				title: '新增商家排名',
				activeName: 'one',
				shopsList: [],
				dateList: [],
				props: {
					value: 'id',
					label: 'name',
					checkStrictly: true,
				},
			};
		},
		created() {
			this.getAllArea();
			this.getData();
			this.organBusinBindingListWay(); //获取业务员
			this.shopsListWay(); //全部商家
		},
		methods: {
			// 递归移除第4层children
			getTreeData(data) {
				// 循环遍历json数据
				for (var i = 0; i < data.length; i++) {
					if (data[i].level == 3) { //等于3的时候把第4层children-设为-undefined
						// children若为空数组，则将children设为undefined
						data[i].children = undefined;
					} else {
						// children若不为空数组，则继续 递归调用 本方法
						this.getTreeData(data[i].children);
					}
				}
				return data;
			},
			//获取省市区树
			async getAllArea() {
				const res = await this.$get('/admin/area/getAllArea')
				if (res.code == 1000) {
					this.areaList = res.data
					this.areaList.unshift({
						adcode: '0',
						name: '默认',
						parentId: 0,
						id: 0
					})
				}
			},
			selectClick(val) {
				this.$forceUpdate(); //强制刷新
			},
			// 删除排名
			clickDel(id) {
				this.$postForm('/admin/messages/organSortDeleted', {
					id
				}).then((res) => {
					if (res.code == 1000) {
						this.$message.success('操作成功');
						this.getData();
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			// 点击确定
			rankingConfirm(rankingForm) {
				this.$refs[rankingForm].validate((valid) => {
					if (valid) {
						if (this.activeName == 'one') {
							this.rankingForm.type = 1
						} else {
							this.rankingForm.type = 2
						}
						let url = '/admin/messages/organSortSave'
						if (this.rankingForm.id) {
							url = '/admin/messages/organSortUpdate'
						}
						this.$post(url, this.rankingForm).then((res) => {
							if (res.code == 1000) {
								this.$message.success('操作成功');
								this.getData();
								this.rankingShow = false;
							}
						}).catch((error) => {
							console.log(error)
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			// 获取业务员
			organBusinBindingListWay() {
				this.$post('/admin/messages/organBusinBindingList', {
					pageNumber: 1,
					pageSize: 10000,
				}).then((res) => {
					if (res.code == 1000) {
						this.salesmanList = res.data.list;
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			// 点击tab切换
			handleClick(tab, event) {
				this.$forceUpdate(); //强制刷新

				console.log(tab, event);
				this.dateList = [];
				this.query = {};
				this.query.pageNumber = 1;
				if (this.activeName == 'one') {
					// 认证类型1笔试2面试3笔试+面试
					this.query.authType = 1;
				} else {
					this.query.authType = 2;
				}

				this.getData();
				this.$forceUpdate(); //强制刷新
			},
			// 新增商家列表
			addMerchant() {
				this.title = '新增商家排名';
				this.rankingForm = {
					area: []
				};
				this.rankingShow = true;
			},
			//新增编辑排名地区变动
			areaChange(value) {
				this.rankingForm.province = ''
				this.rankingForm.city = ''
				this.rankingForm.region = ''
				if (value.length != 0) {
					this.rankingForm.province = value[0] || '';
					this.rankingForm.city = value[1] || '';
					this.rankingForm.region = value[2] || '';
				}
			},
			// 选择省区
			handleChange(value) {
				console.log(value);
				this.query.citySheng = ''
				this.query.cityShi = ''
				this.query.cityXian = ''
				if (value.length != 0) {
					this.query.citySheng = value[0] || '';
					this.query.cityShi = value[1] || '';
					this.query.cityXian = value[2] || '';
				}
			},
			// 选择日期
			onChange(e) {
				if (e.length != 0) {
					this.query.startTime = e[0]
					this.query.endTime = e[1]
				} else {
					this.query.startTime = ''
					this.query.endTime = ''
				}
			},
			onAreaChange(val) {
				this.query.province = ''
				this.query.city = ''
				this.query.region = ''
				if (val && val.length != 0) {
					if (val[0]) {
						this.query.province = val[0]
					}
					if (val[1]) {
						this.query.city = val[1]
					}
					if (val[2]) {
						this.query.region = val[2]
					}
				}
			},
			// 获取 easy-mock 的模拟数据
			getData() {
				// 认证类型1笔试2面试3笔试+面试

				this.$postForm('/admin/messages/organSortAll', this.query).then((res) => {
					if (res.code == 1000) {
						this.$forceUpdate(); //强制刷新
						this.tableData = res.data.list
						this.pageTotal = res.data.totalRow
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			shopsListWay() {
				this.$post('/admin/messages/organAll', {
					pageNumber: 1,
					pageSize: 10000,
				}).then((res) => {
					if (res.code == 1000) {
						this.$forceUpdate(); //强制刷新
						this.shopsList = res.data.list
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			// 触发搜索按钮
			handleSearch() {
				// 认证状态1开启0关闭authStatus
				if (this.query.approve == 1) {
					this.query.authStatus = true;
				} else if (this.query.approve == 2) {
					this.query.authStatus = false;
				}

				if (!this.$.isEmpty(this.query.area)) {
					if (this.query.area.length > 0) {
						this.query.citySheng = this.query.area[0];
						this.query.cityShi = this.query.area[1];
						this.query.cityXian = this.query.area[2];
					}
				}

				this.query.pageNumber = 1;


				this.getData();
			},
			// 点击重置
			resetClick() {
				this.dateList = [];
				this.query = {
					pageNumber: 1,
					pageSize: 10,
					city: ''
				};
				if (this.activeName == 'one') {
					this.query.authType = 1;
				} else {
					this.query.authType = 2;
				}
				if (!this.$.isEmpty(this.query.authStatus)) {
					delete this.query.authStatus
				}

				this.getData();
			},
			// 多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			// 编辑操作
			handleEdit(index, row) {
				this.title = '编辑排名';
				this.rankingForm = JSON.parse(JSON.stringify(row))
				this.rankingForm.currentSort = row.sort
				this.rankingForm.sort = ''
				this.rankingForm.area = []
				if (this.rankingForm.province) {
					this.rankingForm.area.push(this.rankingForm.province)
				}
				if (this.rankingForm.city) {
					this.rankingForm.area.push(this.rankingForm.city)
				}
				if (this.rankingForm.region) {
					this.rankingForm.area.push(this.rankingForm.region)
				}
				if (this.rankingForm.area.length != 0) {
					this.rankingForm.area = this.rankingForm.area.map(Number)
				}
				this.rankingShow = true;
			},

			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageNumber', val);
				this.getData();
			}
		}
	};
</script>

<style>
</style>